<template>
  <div component="BattleEnd" class="BattleEnd">
    <h3 class="title">{{ winner == 1 ? '胜利' : '战败' }}</h3>

    <!-- 经验结算 -->
    <section v-show="page == 1" class="page pageExp">
      <div class="in">
        <ul>
          <li v-for="peo in peos" :key="peo.id" class="clearfix">
            <div class="lv">LV{{ peo.level }}</div>
            <div v-show="peo.level - peo._level > 0" class="lvUp">
              <van-icon name="upgrade" /><span class="num">{{
                peo.level - peo._level
              }}</span>
            </div>
            <div class="pic">
              <Peo :peo="peo"></Peo>
            </div>
            <div class="con">
              <p>
                击杀：<span>{{ peo._kills }}</span>
              </p>
              <p>
                伤害：<span>{{ peo._damages }}</span>
              </p>
              <p>
                经验：<span>{{ peo._exp }}</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div class="btns">
        <van-button
          @touchend.native.prevent.stop="page = 2"
          block
          type="default"
        >
          奖 励
        </van-button>
      </div>
    </section>

    <!-- 奖励结算 -->
    <section v-show="page == 2" class="page pageExp">
      <div class="in">
        <van-grid :column-num="4" :gutter="10" class="goodsList">
          <van-grid-item
            v-for="item in rewardGoods"
            :key="item.id"
            @touchend.native.prevent.stop="clickItem(item)"
            :class="['']"
          >
            <Goods
              :item="item"
              :showBtn="false"
              :goodsSelects="goodsSelects"
            ></Goods>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="btns">
        <div style="overflow: hidden; margin-bottom: 10px">
          <van-button
            v-show="goodsSelects.length != 0"
            @touchend.native.prevent.stop="selectAll(false)"
            size="small"
            class="pull-right"
            type="default"
          >
            清除
          </van-button>
          <van-button
            v-show="goodsSelects.length == 0"
            @touchend.native.prevent.stop="selectAll(true)"
            size="small"
            class="pull-right"
            type="default"
          >
            全选
          </van-button>
          当前背包：{{ count }}/{{ this.packageMaxCount }}
        </div>
        <van-button
          @touchend.native.prevent.stop="click_confirm"
          block
          type="default"
        >
          确 定
        </van-button>
      </div>
    </section>
  </div>
</template>

<script>
import Peo from '@/components/Peo.vue';
import Goods from '@/components/Goods.vue';
import { createGood, peoSave } from '@/class/Tool.js';
export default {
  data() {
    return {
      page: 1,
      peos: [],
      enemys: [],
      rewardGoods: [], //被击杀的敌人的装备 + 奖励
      goodsSelects: [],
      packageMaxCount: config.packageMaxCount
    }
  },
  created() {
    this.winner = this.$route.params.winner;
    this.peos = this.$route.params.peos;
    this.enemys = this.$route.params.enemys;
    this.totalExp = 0; //总经验
    this.clearTimeBuffs();
    this.accountReward();
  },
  computed: {
    count() {
      return game.curSave.myGoods.length + this.goodsSelects.length
    }
  },
  mounted() { },
  methods: {
    //更新属性（清除所有持续时间为time的buff）
    clearTimeBuffs() {
      this.peos.forEach(peo => {
        for (let i = peo._buffs.length - 1; i >= 0; i--) {
          let buff = peo._buffs[i];
          if (buff.roundUnit == 'time') {
            peo.removeBuff(buff.id)
          }
        }
      })
    },

    //结算奖励
    accountReward() {
      //战胜，加入战斗金币奖励等
      // if(this.winner==1){
      //   let gold = createGood(0);
      //   let size = this.$store.state.targetNode.size;
      //   gold.price = (100 + common.random(-20,20)) * size * size ;
      //   gold.name = "$"+gold.price;
      //   this.rewardGoods.push(gold);
      // }

      //加入被击杀敌人的装备
      this.enemys.forEach(peo => {
        if (peo.hp > 0) return;
        let o = data.peos.find(p => p.id == peo.type);
        let fall = JSON.parse(o.$fall);

        this.totalExp += Number(o.$killExp);

        //非装备掉落处理
        fall.forEach(item => {
          let equip = undefined;
          for (let key in peo._equips) {
            let _equip = peo._equips[key];
            if (_equip?.type == item[0]) {
              equip = _equip;
              break;
            }
          };
          if (equip) return;
          if (Math.random() < item[1]) {
            let good = createGood(item[0]);
            this.rewardGoods.push(good)
          }
        })

        //装备掉落处理（如果有指定单位物品掉落率，则按物品掉落率，否则按默认装备掉落率）
        for (let key in peo._equips) {
          let equip = peo._equips[key];
          let prob = config.equipFallProb;
          //装备耐久>0才掉落
          if (equip && equip.dur > 0) {
            for (const ary of fall) {
              if (ary[0] == equip.type) {
                prob = ary[1]
                break;
              }
            }
            if (Math.random() < prob) {
              this.rewardGoods.push(equip)
            }
          }
        }

      })

      this.selectAll(true);

      //经验、等级结算
      this.peos.forEach(peo => {
        peo._level = peo.level;
        peo._exp = Math.round(this.totalExp / this.peos.length);
        peo.exp += peo._exp;
        peo.level = peo.getLevel();
        let levelUps = peo.level - peo._level;
        for (let i = 1; i <= levelUps; i++) {
          peo.addLevelPoint(peo._level + i);
          peo.addSkillPoint(peo._level + i);
        }
        peo.battles++;
      })
    },

    //确定并退出结算
    click_confirm() {
      this.peos.forEach(peo => {
        peoSave(peo);
      })
      this.rewardGoods.forEach((goods => {
        if (goods.type == 0) { //如果是金币
          game.curSave.gold += goods.price;
        } else if (this.goodsSelects.indexOf(goods.id) != -1) {
          game.curSave.myGoods.push(goods);
        }
      }));
      this.$store.commit("updateStore");
      this.$router.push({ name: 'Maze', params: { winner: this.winner } })
    },

    //全选\取消选择物品
    selectAll(isTrue) {
      if (isTrue) {
        this.goodsSelects = [];
        this.rewardGoods.forEach(goods => {
          this.goodsSelects.push(goods.id)
        })
      } else {
        this.goodsSelects = [];
      }
    },

    //点击物品
    clickItem(item) {
      let index = this.goodsSelects.indexOf(item.id);
      if (index == -1) {
        this.goodsSelects.push(item.id)
      } else {
        this.goodsSelects.splice(index, 1)
      }
    }
  },
  components: { Peo, Goods },
}
</script>

<style lang="scss">
.BattleEnd {
  .title {
    font-size: 30px;
    padding-top: 20px;
  }

  .page {
    position: absolute;
    top: 90px;
    bottom: 0;
    right: 10px;
    left: 10px;

    .in {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100px;
      top: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .btns {
      text-align: left;
      position: absolute;
      bottom: 10px;
    }
  }

  .goodsList .price {
    display: none;
  }

  .goodsList .lines {
    display: block;
  }

  .pageExp .in > ul {
    margin-top: -10px;
    > li {
      border: 1px solid #444;
      border-radius: 5px;
      text-align: left;
      margin: 20px 0;
      padding: 10px;
      font-size: 14px;
      position: relative;

      .pic {
        position: relative;
        width: 60px;
        height: 60px;
        float: left;
        margin-right: 15px;
      }

      .con {
        overflow: hidden;
      }

      .lv {
        float: right;
        line-height: 60px;
        font-size: 16px;
      }

      .lvUp {
        position: absolute;
        right: 0;
        top: -10px;
        font-size: 22px;
        color: #ff0;
      }
    }
  }
}
</style>
